<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
  <title> PUSHIN CAT | FLAG </title>
  <link rel="stylesheet" href="//bootswatch.com/cyborg/bootstrap.min.css">
  <style>
body{background: #eee url(http://subtlepatterns.com/patterns/sativa.png);}
html,body{
    position: relative;
    height: 100%;
}

#output{
    position: absolute;
    width: 300px;
    top: -75px;
    left: 0;
    color: #fff;
}

.login-container{
    position: relative;
    width: 300px;
    margin: 80px auto;
    padding: 20px 40px 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #ccc;
}


.login-container::before,.login-container::after{
    content: "";
    position: absolute;
    width: 100%;height: 100%;
    top: 3.5px;left: 0;
    background: #fff;
    z-index: -1;
    -webkit-transform: rotateZ(4deg);
    -moz-transform: rotateZ(4deg);
    -ms-transform: rotateZ(4deg);
    border: 1px solid #ccc;

}

.login-container::after{
    top: 5px;
    z-index: -2;
    -webkit-transform: rotateZ(-2deg);
     -moz-transform: rotateZ(-2deg);
      -ms-transform: rotateZ(-2deg);

}

.avatar{
    width: 150px;height: 150px;
    margin: 10px auto 30px;
    border-radius: 100%;
    border: 2px solid #aaa;
    background-size: cover;
    background-image: url(http://cs307911.vk.me/v307911814/2e4c/glRTxH-2iEM.jpg);
    
    

}

.form-box input{
    width: 100%;
    padding: 10px;
    text-align: center;
    height:40px;
    border: 1px solid #ccc;;
    background: #fafafa;
    transition:0.2s ease-in-out;

}

.form-box input:focus{
    outline: 0;
    background: #eee;
}

.form-box input[type="text"]{
    border-radius: 5px 5px 0 0;
    text-transform: lowercase;
}

.form-box input[type="password"]{
    border-radius: 0 0 5px 5px;
    border-top: 0;
}

.form-box button.login{
    margin-top:15px;
    padding: 10px 20px;
}



  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

  <script TYPE="text/javascript">
    function logout(){
      $.post( './do.php', 
            {'action': 'logout'}, 
            function(data){
              window.location.href = './index.html';
            });

    }
  	function send(){
  		$.post( './do.php', 
  				{'action': 'flag'},
  				function(data){
                    $("#output").removeClass(' alert alert-success');
                    $("#output").addClass("alert alert-danger animated fadeInUp")
                    $("#output").html(data);
  				} );
  	}
  </script>
</head>
<body>

<div class="container">
	<div class="login-container">
			<div id='output'></div>
            <div class="avatar"></div>
            <div class="form-box">
                <form method='POST' onsubmit='send();return false;'>
                    <button class="btn btn-info btn-block login" type="submit"> Get Flag </button>
                    <button class="btn btn-info btn-block login" type="button" onclick='logout();'> Logout </button>
                </form>
            </div>
        </div>
        
</div>

</body>
</html>